<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="list-box">
    <div class="nav">
        <ul>
            <li>服务管理</li>
            <li>/</li>
            <li>服务列表</li>
        </ul>
    </div>
    <div class="search">
        <form action="" method="">
            <input type="hidden" id="currPage"/>
            服务标题 : <input id="title" type="text">
            <input type="button" class="btn" id="searchBtn" value="搜索">
        </form>
    </div>
    <div class="toolbar">
        <input type="button" class="btn" onclick="jumpAdd()" value="新增服务">
        <input type="button" class="btn" onclick="doDeletes()" value="删除服务">
    </div>
    <div>
        <table id="tt"></table>
    </div>
    <div class="page">
        <ul id="page-bar"></ul>
    </div>
</div>
<script type="text/javascript">
    function loadList(page) {
        page = page == undefined ? 1 : page;
        // 加载初始数据
        $.get("/web/serviceInfo", {op: "query", page: page, title: $("#title").val()}, function (data) {
            // 记录当前页码
            $("#currPage").val(data.page);
            // 给table中加数据
            var table = $("#tt");
            table.empty();
            table.append(`<tr>
                <th><input id="checkAll" onclick='checkAll()' type="checkbox"></th>
                <th>编号</th>
                <th>标题</th>
                <th>创建时间</th>
                <th>最后修改时间</th>
                <th>操作</th>
            </tr>`);
            // 添加其他行
            for (var x = 0; x < data.rows.length; x++) {
                var service = data.rows[x];
                table.append(`<tr ${x % 2 != 0 ? 'class="odd"' : ''}>
                <td><input ckserviceId="${service.serviceId}" type="checkbox"></td>
                <td>${service.serviceId}</td>
                <td>${service.serviceTitle}</td>
                <td>${service.createTime}</td>
                <td>${service.modifyTime}</td>
                <td>
                    <input type="button" class="btn" onclick="jumpUpdate(${service.serviceId})" value="编辑">
                    <input type="button" class="btn" onclick="doDelete(${service.serviceId})" value="删除">
                </td>
            </tr>`);
            }
            // 处理分页栏
            var pageBar = $("#page-bar");
            pageBar.empty();
            pageBar.append("<li onclick='loadList(" + ((page - 1) < 1 ? 1 : (page - 1)) + ")'>&lt;&lt;</li>");
            // 计算要显示的最大的页码
            var start = 1;
            var end = 1;
            if (data.maxPage <= 10) {
                end = data.maxPage;
            } else if (data.maxPage > 10) {
                start = (data.page - 4) > 0 ? (data.page - 4) : 1;
                end = (start + 9) > data.maxPage ? data.maxPage : (start + 9);
            }

            // 显示其它页
            for (var x = start; x <= end; x++) {
                if (x == data.page) {
                    pageBar.append("<li class='page-active' >" + x + "</li>");
                } else {
                    pageBar.append("<li onclick='loadList(" + x + ")'>" + x + "</li>");
                }
            }
            pageBar.append("<li onclick='loadList(" + ((page + 1) > data.maxPage ? data.maxPage : (page + 1)) + ")'>&gt;&gt;</li>");
        });
    }

    function searchBntClick() {
        loadList(1);
    }

    $(function () {
        // 页面一加载就加载默认数据
        loadList(1);
        // 给搜索按钮绑定事件  (里面的事件，只要写名字即可，不要写())
        $("#searchBtn").click(searchBntClick);
        // 给批量删除的按钮绑定事件
        $("#deletsBtn").click(function () {
            var cks = $("[ckproductid]:checked");
            if (cks == undefined || cks.length == 0) {
                return;
            }
            // 拼接参数
            var param = "op=deletes";
            for (var x = 0; x < cks.length; x++) {
                param += "&productId=" + $(cks[x]).attr("ckproductid")
            }
            if (confirm("您确定要删除选中的数据吗？")) {
                $.post("/web/product", param, function (data) {
                    if (data > '0') {
                        loadList($("#currPage").val());
                        $("#content").load("serviceInfo/serviceInfo-list.html");
                        alert("删除成功");
                    } else {
                        $("#content").load("serviceInfo/serviceInfo-list.html");
                        alert("删除失败");
                    }
                });
            }

        });
    })


    function doDelete(serviceInfoId) {
        if (confirm("您确定要删除选中的数据吗？")) {
            $.post("/web/serviceInfo", {op: "delete", serviceInfoId: serviceInfoId}, function (data) {
                if (data == 1) {
                    alert("删除成功");
                    loadList($("#currPage").val());
                } else {
                    alert("删除失败");
                }
            });
        }
    }

    function doDeletes() {
        var cks = $("[ckserviceId]:checked");
        if (cks == undefined || cks.length == 0) {
            return;
        }
        var param = "op=deletes";
        for (var x = 0; x < cks.length; x++) {
            param += "&serviceId=" + $(cks[x]).attr("ckserviceId");
        }
        if (confirm("您确定要删除选中的数据吗？")) {
            $.post("/web/serviceInfo", param, function (data) {
                if (data > '0') {
                    alert("删除成功");
                    loadList($("#currPage").val());
                } else {
                    alert("删除失败");
                }
            });
        }
    }

    function jumpAdd() {
        $("#content").load("serviceInfo/service-add.html");
    }

    function jumpUpdate(id) {
        updateId = id;
        $("#content").load("serviceInfo/service-update.html");
    }

    function checkAll() {
        ck = $("#checkAll");
        cks = $("[ckserviceId]");
        for (var i = 0; i < cks.length; i++) {
            $(cks[i]).prop("checked", ck.prop("checked"))
        }
    }
</script>
</body>
</html>
